<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span></span>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="add"
              v-auth-button="['add']"
            ></el-button>
          </div>
        </template>
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item, index) in tabList"
            :key="index"
            :label="item.name"
            :name="item.value"
          ></el-tab-pane>
        </el-tabs>
        <form-create :rule="rule" v-model="fApi" :option="options" />
      </el-card>
    </el-main>
  </el-container>
  <!--添加-->
  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @selectFromData="selectFromData"
    :tabList="this.tabList"
    :tabStatus="this.param.codeType"
    @closed="dialog.save = false"
  >
  </save-dialog>
</template>
<script>
import { queryTypeByDic } from '@/utils/getData'
import saveDialog from './components/save'
import config from '@/config'
export default {
  components: {
    saveDialog
  },
  data () {
    return {
      fApi: {},
      options: {
        onSubmit: async (formData) => {
          let res = await this.$API.operationAuto.saveOperation.post(formData)
          if (res.code == 200) {
            this.$message.success("保存成功")
          }
        },
        resetBtn: true
      },
      rule: [],
      activeName: 1,
      tabList: [],
      param: {
        codeType: 1
      },
      dialog: {
        save: false
      }
    }
  },
  mounted () {
    this.selectdictionaryBy()
    this.selectFromData()
  },
  methods: {
    handleClick (tab, event) {
      this.activeName = tab.props.name
      this.param.codeType = tab.props.name
      this.selectFromData()
    },
    /**
     * 获取参数页面
     */
    async selectdictionaryBy () {
      let result = await queryTypeByDic('paramCode')
      this.tabList = result
      this.activeName = result[0].value
      this.param.codeType = result[0].value
    },
    /**
     * 获取表单数据
     */
    async selectFromData () {
      let result = await this.$API.operationAuto.getFormData.get(this.param)
      let list = result.data
      list.map(item => {
        if (item.type == "upload") {
          item.props.action = config.API_URL + item.props.action
        }
      })
      this.rule = list
      console.log(result)
    },
    /**
     * 添加弹框
     */
    add () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open(this.tabList)
      })
    },
    /**
     * 提交数据
     */
    handleSaveSuccess () {

    }
  }
}
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>